<template>
  <div>
    <public-modal
      width="600px"
      :title="title"
      :publicVisible="publicVisible"
      :footer="false"
      @handleOk="handleOk"
      @cancel="cancel"
    >
      <div slot="content" class="selectPolice flex">
        <div class="left f1">
          <a-tag closable @close.prevent="closeTag(item)" v-for="item in selectList" :key="item">
            {{ getTagNameByTag(item) }}
          </a-tag>
        </div>
        <div class="right f1">
          <a-checkbox-group v-model="selectList">
            <!-- <a-checkbox style="margin-bottom: 10px" @change="fullSelect">全选</a-checkbox> -->
            <a-row style="margin-bottom: 10px" v-for="item in policeList" :key="item.id">
              <a-checkbox :value="item.id">{{ item.name }}</a-checkbox>
            </a-row>
          </a-checkbox-group>
        </div>
      </div>
    </public-modal>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import publicModal from '@/components/publicModal'
export default {
  components: { publicModal },
  data() {
    return {
      title: '选择执法队员',
      publicVisible: false,
      policeList: [],
      selectList: [],
    }
  },
  methods: {
    show(records) {
      this.publicVisible = true
      this.policeList = records.police_list
      this.selectList = records.select_list
    },

    getTagNameByTag(id) {
      const foundObject = this.policeList.find((obj) => obj.id == id)
      return foundObject ? foundObject.name : '暂无'
    },

    closeTag(removedTag) {
      const tags = this.selectList.filter((tag) => tag !== removedTag)
      this.selectList = tags
    },

    fullSelect(e) {
      if (e.target.checked == true) {
        this.policeList.forEach((item) => {
          this.selectList.push(item.id)
        })
        this.selectList = Array.from(new Set(this.selectList))
      } else {
        this.selectList = []
      }
    },

    handleOk() {
      this.$emit('success', this.selectList)
      this.publicVisible = false
    },

    cancel() {
      this.publicVisible = false
    },
  },
}
</script>

<style scoped lang="less">
/deep/ .ant-checkbox-wrapper {
  color: #6cc8c6;
}
/deep/ .ant-checkbox-inner {
  background-color: #036265;
  border-color: #036265;
}
/deep/ .ant-checkbox-checked {
  background: transparent !important;
  color: #9cfdff !important;
}

/deep/ .ant-tag {
  background-color: #036265;
  border-color: #036265;
  color: #9cfdff !important;
  font-size: 16px;
  padding: 6px 10px;
  margin-bottom: 10px;
  .anticon {
    color: #9cfdff !important;
  }
}

.selectPolice {
  height: 500px;
  padding: 20px 20px 0 20px;
}

.right {
  border-left: 1px solid #048799;
  padding-left: 16px;

  overflow: scroll;
}
</style>
